<template>
  <div>
    <el-row>
<div>
  <h2 style="float: left;">项目</h2>
  <br/>
  <br/>
  <div style="margin: 10px 0">
    <el-button
            style="float: left;"
            type="primary" @click="handleAdd(user.id)">新增<i class="el-icon-circle-plus-outline"></i></el-button>
  </div>
  <el-table
          :data="tableData"
          border
          stripe
          :header-cell-class-name="headerBg"
          @selection-change="handleSelectionChange">
    <el-table-column
            type="selection"
            width="55">
    </el-table-column>
    <el-table-column prop="id" label="id" width="80">
    </el-table-column>
    <el-table-column prop="title" label="项目">
    </el-table-column>
    <el-table-column prop="contents" label="项目内容">
    </el-table-column>
    <el-table-column prop="userId" label="用户">
    </el-table-column>
    <el-table-column prop="remarks" label="备注">
    </el-table-column>
    <el-table-column label="操作" width="230px">
      <template slot-scope="scope">
        <el-button type="info" @click="tishi()" v-if="(scope.row.userId===0)">编辑</el-button>
        <el-button type="info" slot="reference" @click="tishi()" v-if="(scope.row.userId===0)">删除</el-button>

        <el-button type="warning" @click="handleEdit(scope.row)"  v-if="!(scope.row.userId===0)">编辑</el-button>
        <span @click="delBtn">
                    <el-popconfirm
                            class="ml-5"
                            confirm-button-text='好的'
                            cancel-button-text='不用了'
                            icon="el-icon-info"
                            icon-color="red"
                            title="您确定删除吗？"
                            @confirm="del(scope.row.id)"
                    >
                        <el-button type="danger" slot="reference" v-if="!(scope.row.userId===0)">删除</el-button>
                    </el-popconfirm>
                </span>
      </template>
    </el-table-column>
  </el-table>
  <div style="padding: 10px 0">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
  </div>

  <el-dialog title="修改信息" :visible.sync="dialogFormVisible" width="30%">
    <el-form  :model="form" label-width="70px" size="small">
      <el-form-item label="项目" >
        <el-input v-model="form.title" autocomplete="off"/>
      </el-form-item>
      <!--      <el-form-item label="角色" >-->
      <!--        <el-select clearable v-model="form.role" placeholder="请选择角色" style="width:100%">-->
      <!--          <el-option v-for="item in  roles" :key="item.name" :lable="item.name" :value="item.rolekey">-->
      <!--            {{item.name}}-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->

      <el-form-item label="选择内容" >
        <el-select style="width: 345px;" v-model="value1" multiple placeholder="请选择（创建完项目后再点击编辑添加内容）" autocomplete="off">
          <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" >
        <el-input v-model="form.remarks" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="用户" >
        <el-input v-model="form.userId" autocomplete="off" :value="this.user.id" disabled="disabled"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</div>
    </el-row>

  </div>
</template>

<script>
export default {
  name: "ZjhTargetTitle",
  data(){
    return{
      tableData: [],
      total: 0,
      pageNum:1,
      pageSize:5,
      username:"",
      email:"",
      dialogFormVisible:false,
      form: {
        title:"",
        sontentId:"",
        remarks:"",
        userId:"",
      },
      multipleSelection:[],
      headerBg:'headerBg',
      roles:[],
      user:Object,
      options: [],
      value1: [],
      errorOccurred: false, // 初始化错误标志位
      targetTitle:"",
    }
  },
  created() {
    // 请求分页查询数据
    this.load()

  },

  watch: {
    errorOccurred(value) {
      if (value) {
        this.$router.push('/login'); // 根据标志位跳转页面
      }
    }
  },
  methods:{
    tishi(){
      this.$message.error("默认数据修改请联系管理员！")
    },
    load(){
      let user = localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")) : "";
      this.request.get("/target-title/page",
              {
                params:{
                  pageNum:this.pageNum,
                  pageSize:this.pageSize,
                  userId:user.id
                }
              })
              .then(res =>{
                this.tableData = res.data.records;
                this.total = res.data.total
              }).catch(error => {
        this.errorOccurred = true; // 设置错误标志位
      });
      this.form.userId = user.id
      // fetch("http://localhost:9911/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize +"&username="+this.username)
      //         .then(res => res.json()).then(res => {
      //   console.log(res)
      //   this.tableData = res.data
      //   this.total = res.total
      // })
    },



    // 增
    save(){
      this.request.post("/target-title/a",
              // this.form,this.value1
        {
            targetTitle:this.form,
            value1:this.value1
        }
      ).then(res=>{
        if (res.code==="200"){
          console.log(this.value1)
          this.$message.success("保存成功！")
          this.dialogFormVisible=false
          this.load()
        }
        else
          this.$message.error("保存失败！")
      })
    },

    handleAdd(){
      this.dialogFormVisible=true
      this.form.title=""
      this.form.remarks=""
      this.value1=[]
      this.form.options=[]
      // this.form.userId=this.user.id
    },
    // 改
    handleEdit(row){
      this.request.get("/target-title/controllerId/"+row.id).then(res=>{
        this.options = res.data
      })
      this.value1=[]
      this.form = Object.assign({},row)
      this.dialogFormVisible=true
    },
    // 删
    del(id){
      this.request.delete("/target-title/"+id).then(res=>{
        if (res.code==="200"){
          this.$message.success("删除成功！")
          this.load()
        }
        else
          this.$message.error("删除失败！")
      })
    },
    handleSelectionChange(val){
      this.multipleSelection=val
    },
    delBatch(){
      let ids = this.multipleSelection.map(v=> v.id)// [{},{},{}] => [1,2,3]
      this.request.post("/target-title/del/batch",ids).then(res=>{
        if (res.code==="200"){
          this.$message.success("删除成功！")
          this.load()
        }
        else
          this.$message.error("删除失败！")
      })
    },

    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum
      this.load()
    },
    // exp(){
    //   window.open("http://localhost:9911/user/export")
    // },
    delBtn(e){
      e.stopPropagation();
    }
  }
}
</script>

<style scoped>

</style>